<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model="uname">
  </div>
</template>

<script>
export default {
  data () {
    return {
      uname: 'zs',
      dog: {
        name: '旺财',
        age: 3
      }
    }
  },
  watch: {
    uname: {
      handler (val) {
        console.log(val)
      },
      immediate: true, // 立即侦听；页面打开，马上执行一次侦听器函数
    },
    // dog: {
    //   handler (val) {
    //     console.log(val)
    //   },
    //   deep: true, // 深度侦听；侦听对象，加入这个选项，当对象的任意属性改变后，都会触发侦听器
    // }

    // 假设需求是只需要侦听 dog 对象里面的 name属性的变化
    'dog.name' (val) {
      console.log(val)
    }
  }
}
</script>

<style>

</style>